
import React, { useState } from "react";
import "./post_xiang.css";
import { Card, NavBar, Steps,Button } from 'antd-mobile';
import img3 from "../cll/imgs/1.png"
import { useNavigate } from "react-router-dom"
const { Step } = Steps
function PostXiang() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }

    const [list, setlist] = useState(JSON.parse(localStorage.getItem("post-xiang")) || {})
    console.log(JSON.parse(localStorage.getItem("post-xiang")));
    const steps = [

        { name: "已投递", content: "你的简历已成功投递到对方的简历库" },
        { name: "被查看", content: "你的简历已被企业查看了" },
        { name: "待沟通", content: "等待面试通知" },
        { name: "待面试", content: "收到面试邀约" },
        { name: "已面试", content: "已到公司面试" },
        { name: "试工中" },
    ];
    const currentStep = list.status


    const stepsStatus = steps.map((_, index) => {
        if (index < list.status) {
            return 'finish'; // 已经完成的步骤
        } else if (index === list.status) {
            return 'process'; // 当前进行中的步骤
        } else {
            return 'wait'; // 还未开始的步骤
        }
    });
    return (
        <div className="post_xiang">
            <div className="post_xiang1">
                <div>
                    <img src={img3} alt="" srcset="" className="img3" />
                </div>
                <NavBar onBack={back}>
                    <span>投递详情</span>
                </NavBar>
                <Card
                    style={{ borderRadius: '16px', marginTop: 6, height: 150, lineHeight: 3 }}
                >
                    <span className="post_xiang2">
                        <p className="company">
                            {list.typeId.companyName.slice(0, 2)}
                        </p>
                        <p>
                            <span style={{ display: "flex" }}>
                                <span>
                                    <h3>{list.careerName}</h3>
                                </span>
                                <span style={{ marginLeft: 150 }}>
                                    <h3>{list.salary}</h3>
                                </span>
                            </span>
                            <p>
                                {list.typeId.companyName}
                            </p>
                        </p>

                    </span>
                </Card>

            </div>

            <div style={{ marginTop: -5 }}>
                <Card
                    style={{
                        borderRadius: '18px', marginTop: -52, height: 100,
                        lineHeight: 2, width: 400, margin: "0 auto"
                    }}
                >
                    <Steps current={currentStep}>
                        {steps.map((step, index) => (
                            <Step key={index} title={step.name} />
                        ))}
                    </Steps>
                </Card>
            </div>
            <div>
                <Steps direction='vertical'>

                    {steps.map((step, index) => (
                        <Step
                            key={index}
                            title={step.name}
                            status={stepsStatus[index] || 'wait'} 
                            description={step.content}
                        />
                    ))}
                </Steps>
            </div>
            <div className="footer">
                <Button block color='warning' size='large'>
                    面试评价
                </Button>
            </div>
        </div>
    )
}

export default PostXiang
